<template>
  <div class="delete-log">
    <div class="table-wrapper">
      <super-table
        :height="tableHeight"
        ref="tableRef"
        v-model:page="searchForm.pageNum"
        v-model:limit="searchForm.pageSize"
        :loading="loading"
        :data="tableData"
        :total="searchForm.total"
        :column="tableColumn"
        @change-page="getData"
      >
        <template #image="{ row }">
          <a-image :width="80" :src="row.image" />
        </template>
      </super-table>
    </div>
    <div class="operation-btn">
      <a-button @click="emit('update:visible', false)">关闭</a-button>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { tableColumn } from "./data";
import InitHook from "./composables/initHook";
import OperationHook from "./composables/operationHook";
import TableHeightHook from "@/hook/tableHeightHook";
import { toRefs, watch } from "vue";
const props = withDefaults(
  defineProps<{
    visible: boolean;
  }>(),
  {}
);
const emit = defineEmits<{
  (e: "update:visible", vis: boolean): void;
}>();
const { visible } = toRefs(props);
const { tableHeight, loading } = TableHeightHook(0);
const { tableData, tableRef, searchForm } = InitHook();
const { getData, searchHandle } = OperationHook({ tableData, tableRef, loading, searchForm });
searchHandle();
watch(
  () => visible.value,
  (v: boolean) => {
    if (v) searchHandle();
  }
);
</script>
<style lang="stylus" scoped>
.delete-log{
    background-color: #fff;
    padding: 12px;
    .table-wrapper{
        height: calc(100vh - 150px);
    }
}
</style>
